import React from 'react'
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../actions/review.action'
import { connect } from 'react-redux'
import util from '../../util'
import style from './style'
import icons from '../../ui-components/iconFont/icons/css/myfont';
import cx from 'classnames'
import { Link, TitleBar, Table, Button, success as successToast, DateSelect } from '../../ui-components'
import moment from 'moment'
moment.locale('zh-cn')
var ReactTooltip = require("react-tooltip")

class UserAvatar extends React.Component {
  render() {
    return (
      <Link
        style={{display: 'inline-block',lineHeight: '28px'}}
        data-tip={this.props.profile.fullName 
              + (this.props.isSubmitted ? ' 已提交' : ' 未提交') 
              + (this.props.isCanceled ? ' 已取消' : '')}
        to={`/#/okr/objective-targetAll?userId=${this.props.profile.userId}`}
        target="_blank"
      >
        <ReactTooltip multiline effect="solid" />
        <div 
          className={cx({
            [style.avatar]: true,
            [style.mini]: true,
            [style.avatar_na]: !util.user(this.props.profile).avatarUrl,
            [style.submitted]: this.props.isSubmitted,
            [style.canceled]: this.props.isCanceled
          })}
          style={{backgroundImage:`url(${util.user(this.props.profile).avatarUrl})`}}
        ></div>
        {
          this.props.isShowName ? this.props.profile.fullName : ''
        }
      </Link> 
    )
  }
}


@connect(null, dispatch => ({actions: bindActionCreators({...reviewAction}, dispatch)}))
class TemplateBlock extends React.Component {
  state = {
    isEditing: false
  }
  editTemplate(){
    this.setState({
      isEditing: true
    })
  }
  saveTemplate(data){
    const {templateId=null} = data
    if (templateId) {
      this.props.actions.updateTemplate(data)
    }
  }
  render() {
    const v = this.props.data
    const {questions=[]} = v
    return (
      <div className={cx({
        [style.item]:true,
        [style.editing]:this.state.isEditing})}
      >
        {
          <div>
            <div className={cx({
              [style.state]: true,
              [style['color' + v.state]]: true})}
            >
              {META_TEMPLATE_STATE[v.state]}
            </div>
            <div className={style.template_block}>
              <div>
                <label>工作阶段</label>
                <div>
                {
                  moment(v.startTime).format('YYYY.MM.DD') + '~' + moment(v.endTime).format('YYYY.MM.DD')
                }
                </div>
              </div>
              <div>
                <label>自评截止日</label>
                <div>
                {
                  moment(v.selfReviewDeadline).format('YYYY.MM.DD')
                }
                </div>
              </div>
              <div>
                <label>同事反馈截止日</label>
                <div>
                {
                  moment(v.peerReviewDeadline).format('YYYY.MM.DD')
                }
                </div>
              </div>
              <div>
                <label>流程结束</label>
                <div>
                {
                  moment(v.publicDeadline).format('YYYY.MM.DD')
                }
                </div>
              </div>
              <div>
                <label>通用问题</label>
                <div>
                  {
                    questions ? questions.map((v, i) => <p key={i}>- {v}</p>) : ''
                  }
                </div>
              </div>
            </div>
          </div>
        }
      </div>
    )
  }
}

export default
@connect(({ review }) => ({ review }), dispatch => ({actions: bindActionCreators({...reviewAction}, dispatch)}))
class ReviewReport extends React.Component {

  componentDidMount() {
    const { templateId } = this.props.params
    this.props.actions.fetchReviewReport(templateId)
    this.props.actions.fetchReviewReportActivities(templateId)
  }

  render() {
    const { reviewReport={}, reviewReportActivities=[]} = this.props.review
    const { reviewTemplateDTO={},
            selfFinished,
            selfInProgress,
            selfNotBegin,
            peerFinished,
            peerInProgress,
            peerNotBegin,
            managerFinished,
            managerInProgress,
            managerNotBegin
            } = reviewReport
    const subordinateTable = {
      model: {
        managerInvitation: '主管',
        reviewee: '自评人',
        staffInvitations: '受邀反馈人',
        score: '主管评分',
        others: '操作'
      },
      config: {
        managerInvitation: 1,
        others: 1
      },
      data: reviewReportActivities,
      map: {
        others: (_, args, hover) => {
          return (
            <div>
              <Link to={`#/review/item/${args.activity.activityId}/reports`} target="_blank">查看报告</Link>
            </div>
          )
        },
        managerInvitation: (_, args, hover) => {
          const managerUser = args.managerInvitation ? args.managerInvitation.revieweeUserProfile : null
          return managerUser ? <UserAvatar
                                profile={managerUser}
                                isSubmitted={args.managerInvitation.isSubmitted}
                                isCanceled={args.managerInvitation.isCanceled}
                                isShowName={true} 
                               /> : null
        },
        score: (_, args, hover) => {
          return args.managerInvitation ? args.managerInvitation.score : null
        },
        reviewee: (_, args, hover) => {
          return <UserAvatar
                  profile={args.activity.revieweeUserProfile}
                  isSubmitted={args.activity.isSubmitted}
                  isCanceled={args.activity.isCanceled}
                  isShowName={true} 
                 />
        },
        staffInvitations: (_, args, hover) => {
          return (
            <div>
            {
              args.staffInvitations ? args.staffInvitations.map((v, i)=>{
                return <UserAvatar
                        key={i}
                        profile={v.revieweeUserProfile}
                        isSubmitted={v.isSubmitted}
                        isCanceled={v.isCanceled}
                       />
              }) : null
            }
            </div>
          )
        },
      }
    }
    const sumSelf = selfFinished + selfInProgress + selfNotBegin
    const sumPeer = peerFinished + peerInProgress + peerNotBegin
    const sumManager = managerFinished + managerInProgress + managerNotBegin

    return (
      <div>
        <TitleBar label={reviewTemplateDTO.templateName} back />
        <div className={style.templates}>
        {
          <TemplateBlock data={reviewTemplateDTO} />
        }
        </div>
        <div style={{margin:'20px 0'}}>
          <h2 className={style.report_header}>自评 <span>{sumSelf}份</span></h2>
          <div className={style.report_chart}>
            <div
              className={style.bar}
              style={{color: '#777', width: 100*selfNotBegin/sumSelf+'%'}}
              data-tip={`未撰写：${selfNotBegin}人`}
            ><span>未撰写</span></div>
            <div
              className={style.bar}
              style={{background: '#A2CEEA', width: 100*selfInProgress/sumSelf+'%'}}
              data-tip={`撰写中：${selfInProgress}人`}
            ><span>撰写中</span></div>
            <div
              className={style.bar}
              style={{background: '#638DEC', width: 100*selfFinished/sumSelf+'%'}}
              data-tip={`已提交：${selfFinished}人`}
            ><span>已提交</span></div>
          </div>
          <h2 className={style.report_header}>同事反馈 <span>{sumPeer}份</span></h2>
          <div className={style.report_chart}>
            <div
              className={style.bar}
              style={{color: '#777', width: 100*peerNotBegin/sumPeer+'%'}}
              data-tip={`未撰写：${peerNotBegin}人`}
            ><span>未撰写</span></div>
            <div
              className={style.bar}
              style={{background: '#A2CEEA', width: 100*peerInProgress/sumPeer+'%'}}
              data-tip={`撰写中：${peerInProgress}人`}
            ><span>撰写中</span></div>
            <div
              className={style.bar}
              style={{background: '#638DEC', width: 100*peerFinished/sumPeer+'%'}}
              data-tip={`已提交：${peerFinished}人`}
            ><span>已提交</span></div>
          </div>
          <h2 className={style.report_header}>主管反馈 <span>{sumManager}份</span></h2>
          <div className={style.report_chart}>
            <div
              className={style.bar}
              style={{color: '#777', width: 100*managerNotBegin/sumManager+'%'}}
              data-tip={`未撰写：${managerNotBegin}人`}
            ><span>未撰写</span></div>
            <div
              className={style.bar}
              style={{background: '#A2CEEA', width: 100*managerInProgress/sumManager+'%'}}
              data-tip={`撰写中：${managerInProgress}人`}
            ><span>撰写中</span></div>
            <div
              className={style.bar}
              style={{background: '#638DEC', width: 100*managerFinished/sumManager+'%'}}
              data-tip={`已提交：${managerFinished}人`}
            ><span>已提交</span></div>
          </div>
        </div>
        <Table {...subordinateTable} />
      </div>
    )
  }
}
